<template>
  <view class="courier-list">
    <view class="courier-nav" v-for="item,index in 5">
      <view class="courier-title">
        <view class="courier-address">
          <view class="address-default" v-if="index==0">默认</view>
          恒大名都-11号楼-2单元 601
        </view>
        <view class="courier-info">杨先生 180****2091</view>
      </view>
      <image src="@/static/icon/user/edit.png" mode="" @click="onAddress('edit')"></image>
    </view>
  </view>
  <view class="courier-btn">
    <up-button icon="plus" text="添加收货地址" shape="circle" color="#FF416C" iconColor="#fff" @click="onAddress('add')">
    </up-button>
  </view>
</template>

<script setup>
  import {} from 'vue'
  function onAddress(type){
    uni.navigateTo({
      url:`/subpages/userPage/add-address?type=${type}`
    })
  }
</script>

<style lang="less" scoped>
  .courier-list {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 12rpx 24rpx;

    .courier-nav {
      width: 100%;
      height: 160rpx;
      border-radius: 24rpx;
      background: #FFFFFF;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 32rpx;

      .courier-title {
        flex: 1;
        display: flex;
        flex-direction: column;

        .courier-address {
          display: flex;
          align-items: center;

          .address-default {
            width: 80rpx;
            height: 40rpx;
            border-radius: 8rpx;
            background: #FFE8EA;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 40rpx;
            color: rgba(255, 65, 108, 1);
            text-align: center;
            margin-right: 8rpx;
          }
        }

        .courier-info {
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          margin-top: 16rpx;
        }
      }

      image {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }

  .courier-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 136rpx;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>